<!DOCTYPE html>
<html>
  <head>
    <title>Load From JSON</title>
    <script src="../node_modules/fabric/dist/fabric.js"></script>
    <script src="../dist/index.umd.js"></script>
  </head>
  <body>
    <div><canvas id="container" style="border: 1px solid #ccc" width="1024" height="768"></canvas></div>
    <script>
      let jsonStr =
        '{"version":"4.5.1","objects":[{"id":"fabric-a4fed3dc-26b1-4f6d-8a09-907d3a1407e7","linkable":false,"type":"Relation","version":"4.5.1","originX":"left","originY":"top","left":421.38,"top":219.15,"width":48.9,"height":343.51,"fill":"#f00","stroke":"#f00","strokeWidth":3,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"title":"","fromId":"fabric-28835df2-0923-433b-82b9-ca81ee535f5e","toId":"fabric-ab328cb7-9139-47bc-976f-aaae346b4114","fromName":"User","toName":"Role","referencedColumnName":"id","relationType":"many-to-many","arrowType":"end","arrowAngel":0.39269908169872414,"arrowLength":18,"x1":24.452241715399623,"x2":-24.452241715399623,"y1":171.757012987013,"y2":-171.757012987013},{"id":"fabric-28835df2-0923-433b-82b9-ca81ee535f5e","linkable":true,"type":"Entity","version":"4.5.1","originX":"left","originY":"top","left":367.28,"top":476.76,"width":206,"height":171.82,"fill":"#fee","stroke":"#000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"title":"User","fields":[{"name":"id","type":"int","primary":true,"generated":true},{"name":"userName","type":"varchar","length":120},{"name":"password","type":"varchar","length":256},{"name":"age","type":"int"},{"name":"email","type":"varchar","length":256}],"padding":5,"objects":[]},{"id":"fabric-ab328cb7-9139-47bc-976f-aaae346b4114","linkable":true,"type":"Entity","version":"4.5.1","originX":"left","originY":"top","left":318.38,"top":159.58,"width":206,"height":119.14,"fill":"#fee","stroke":"#000","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"title":"Role","fields":[{"name":"id","type":"int","primary":true,"generated":true},{"name":"roleName","type":"varchar","length":256},{"name":"roleCode","type":"varchar","length":256}],"padding":5,"objects":[]}]}';
      let canvas = new fabric.Canvas('container', {
        preserveObjectStacking: true,
      });
      canvas.loadFromJSON(jsonStr);
      console.log(canvas.toEntityObject());

      //添加事件监听
      canvas.on('mouse:down', function (options) {
        console.log(options);
        console.log(options.target);
      });
    </script>
  </body>
</html>
